<template>
  <div class="page-container">
    <!--面包屑导航-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>数据中心</el-breadcrumb-item>
        <el-breadcrumb-item>数据统计</el-breadcrumb-item>
        <el-breadcrumb-item>渠道数据统计</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" :rules="filtersRules">
        <el-row class="search-input">
          <el-row class="times">
            <el-form-item label="统计日期：" prop="startTime">
              <el-date-picker
                v-model="filters.startTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="开始时间"
                class="input_postion w211"
                clearable
                @change="changeStartDate"
                :picker-options="startDateDisabled"
              ></el-date-picker>
            </el-form-item>
            <span class="times-to">-</span>
            <el-form-item prop="endTime">
              <el-date-picker
                v-model="filters.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="结束时间"
                class="input_postion w211"
                clearable
                @change="changeEndDate"
                :picker-options="endDateDisabled"
              ></el-date-picker>
            </el-form-item>
          </el-row>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              icon="el-icon-refresh"
              :label="$t('action.reset')"
              class="resetButton"
              @click="resetForm('filters')"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="el-icon-search"
              label="搜索"
              @click="getPromotionList()"
              class="searchButton"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              label="导出"
              @click="channelExcel()"
              class="searchButton"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="tab-container">
      <el-tabs v-model="activeName">
        <el-tab-pane
          v-for="item in tabMapOptions"
          :key="item.key"
          :label="item.label"
          :name="item.key"
        >
          <keep-alive>
            <tab-pane
              v-if="activeName==item.key"
              :type="item.key"
              ref="child"
              :parentFilters="filters"
            />
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--弹出框-->

  </div>
</template>

<script>
  import KtButton from "@/views/Core/KtButton";
  import { format } from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import { darkmagenta } from "color-name";
  import tabPane from "./TabPaneChannelCount";
  export default {
    name: "Tab",
    components: {
      tabPane,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        channelOption:[],
        filtersRules: {

        },
        tabMapOptions: [
          { label: "全部", key: "1" },
          { label: "企业微信", key: "4" },
          { label: "微信银行公众号", key: "5" },
          { label: "we2000公众号", key: "6" },
          { label: "we2000小程序", key: "7" },
          { label: "微众App", key: "2" },
          { label: "微信银行小程序", key: "3" },
          { label: "企业", key: "10" },
          { label: "卡劵平台", key: "11" },
          { label: "其他", key: "12" }
        ],
        activeName: "1",
        createdTimes: 0,
        size: "small",
        filters: {
          id: "",
          startDate:[]
        },
        startDateDisabled: {},//开始时间限制
        endDateDisabled: {},//结束时间限制
      };
    },
    methods: {
      changeStartDate: function() {
        var this_ = this;
        this_.endDateDisabled = {
          disabledDate: time => {
            if (this_.filters.startTime) {
              return time.getTime() <= new Date(this_.filters.startTime).getTime();
            }
          }
        };
      },
      changeEndDate: function() {
        var this_ = this;
        this_.startDateDisabled = {
          disabledDate: time => {
            if (this_.filters.endTime) {
              return time.getTime() >= new Date(this_.filters.endTime).getTime();
            }
          }
        };
      },
      // 时间格式化
      dateFormat: function(row, column, cellValue, index) {
        return format(row[column.property]);
      },

      resetForm(formName) {
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
        }
        this.$refs.child[0].listQuery.pageNo = 1;
        this.$refs.child[0].getList();
      },
      getPromotionList() {
        this.$refs.child[0].listQuery.pageNo = 1;
        this.$refs.child[0].getList();
      },
      channelExcel(){

      }
    },
    watch: {
      activeName(val) {
        this.$router.push(`${this.$route.path}?tab=${val}`);
      }
    },
    created() {
      //获取商家列表
      const tab = this.$route.query.tab;
      if (tab) {
        this.activeName = tab;
      }
    },
    mounted() {
    }
  };
</script>

<style scoped lang="scss">
  .mb30{
    margin-bottom: 30px;
  }
  /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item:first-child {
    border-left: 1px solid #9b9da3 !important;
    &.is-active {
      border-color: #0090ff !important;
    }
  }
  .search-input{
    .times{
      .w211{
        width: 211px !important;
        /deep/ .el-input__inner{
          width: 211px !important;
        }
      }
    }
  }

</style>
